<div id="main">
	<div id="main-header">
		<div id="left"></div>
		<div id="best-products"></div>
		<div id="right"></div>
	</div>
	
	<?php if(count($products) > 0): ?>
	<script type="text/javascript" src="<?php echo base_url("/files/javascripts/jquery/jquery-ui.js"); ?>"></script>
	<script>
	$.fn.reverse = Array.prototype.reverse;
	$(function(){
		var next = false;
		$("#left").click(function(){
			$("div.products").each(function(index){
					if($(this).attr("id") == current && index < $("div.products").length-1){
						$(this).hide();
						next = true;
					}else if(next){
						current = $(this).attr("id");
						$(this).show();
						next = false;
					}
			});
		});
		$("#right").click(function(){
			$("div.products").reverse().each(function(index){
				if($(this).attr("id") == current && index < $("div.products").length-1){
					$(this).hide();
					next = true;
				}else if(next){
					current = $(this).attr("id");
					$(this).show();
					next = false;
				}
			});
		});
	});
	</script>
	<?php foreach($products as $index=>$product): ?>
	<div <?php echo ($index > 0)?'style="display: none;"':''; ?> class="products" id="product_<?php echo $product->id; ?>">
		<div id="content-img">
			<img src="<?php echo $product->image; ?>" />
		</div>
		<div id="content-txt">
			<?php echo $product->description; ?>
		</div>
	</div>
	<?php endforeach; ?>
	<script type="text/javascript">
	<!--
	var current = 'product_'+<?php echo $products[0]->id; ?>;
	//-->
	</script>
	<?php endif; ?>
</div>